<script setup lang="ts">
import { useI18n } from '@/hooks/web/useI18n'
import { reactive, watch } from 'vue'
import { goodsSelect } from '@/api/common'
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElRow,
  ElCol,
  ElDatePicker,
  ElSelect,
  ElOption
} from 'element-plus'
import { relative } from 'path'

const { t } = useI18n()

const props = defineProps({
  currentRow: {
    type: Object as any,
    default: () => null
  }
})

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    form.id = currentRow.id
    form.goods_id = currentRow.gname
    form.store_id = currentRow.goods_text
    form.transport = currentRow.transport
    form.placestart = currentRow.placestart
    form.client_code = currentRow.client_code
    form.piece = currentRow.length
    form.entrytime = currentRow.entrytime
    form.weight = currentRow.weight
    form.width = currentRow.width
    form.high = currentRow.high
    form.length = currentRow.length
  }
)

// 表单对应的字段（绑定到输入框以及选择框俄字段）
const form: any = reactive({
  id: '',
  goods_id: '',
  store_id: '',
  transport: '',
  placestart: '',
  client_code: '',
  remark: '',
  piece: '',
  entrytime: '',
  goods: '',
  shouhuo: '',
  placeend: '',
  weight: '',
  width: '',
  high: '',
  length: ''
})

// 部门-下拉选择
const departmentArr: any = reactive([])
const getDepartmentSelect = async () => {
  // let goodsTypeArr: any = []
  let res: any = await goodsSelect({})
  res.data.list.forEach((item) => {
    departmentArr.push({
      label: item.name,
      value: item.id
    })
  })
}
getDepartmentSelect()

defineExpose({
  getFormData: () => {
    return form
  }
})
</script>

<template>
  <ElForm :model="form" label-width="auto">
    <ElRow>
      <!-- <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('productManagement.descriptionOfGoods')">
          <ElInput v-model="form.goods_id" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('router.productType')">
          <ElSelect v-model="form.store_id" :placeholder="t('common.inputText')">
            <ElOption
              v-for="item in departmentArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol> -->
      <!-- <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('router.productType')">
          <ElInput v-model="form.password" />
        </ElFormItem>
      </ElCol> -->
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('purchaseOrderAddWrite.long')">
          <ElInput v-model="form.length" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('purchaseOrderAddWrite.wide')">
          <ElInput v-model="form.width" />
        </ElFormItem>
      </ElCol>

      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('purchaseOrderAddWrite.tall')">
          <ElInput v-model="form.high" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="120px" :label="t('purchaseOrderAddWrite.weight')">
          <ElInput v-model="form.weight" />
        </ElFormItem>
      </ElCol>
    </ElRow>
  </ElForm>
</template>
<style scoped lang="less"></style>
